<template>
    <q-page class="q-pa-sm" style="padding-top:30px">
        <q-header elevated class="text-white" :style="setTransColor()" :class="isAndroid15Plus? 'extra-top':''">
            <q-toolbar>
                <q-toolbar-title class="chat-header-title">
                    <q-tabs v-model="tab">
                        <q-tab name="reborn" label="怀旧服" />
                        <q-tab name="normal" label="正式服" />
                    </q-tabs>
                </q-toolbar-title>
            </q-toolbar>
        </q-header>
        
        <threadList 
            ref="threadListRef"
            :get-thread-list-fn="getRebornThreadList"
            :get-thread-detail-fn="getThreadDetail"
        />
        
        <!-- 固定按钮组 -->
        <q-page-sticky position="bottom-right" :offset="[18, 18]">
            <div class="fab-group">
                <!-- 发帖按钮 -->
                <q-btn 
                    fab-mini
                    icon="add" 
                    color="primary" 
                    @click="handlePost"
                    class="fab-btn post-btn"
                >
                    <q-tooltip class="bg-secondary text-white">发帖</q-tooltip>
                </q-btn>
                
                <!-- 刷新按钮 -->
                <q-btn 
                    fab-mini
                    icon="refresh"  
                    @click="handleRefresh"
                    :loading="refreshing"
                    :disable="refreshing"
                    class="fab-btn refresh-btn"
                >
                    <q-tooltip class="bg-primary text-white">刷新</q-tooltip>
                </q-btn>
            </div>
        </q-page-sticky>
    </q-page>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { setTransColor,isAndroid15Plus } from 'src/utils/common'
import threadList from 'src/components/threadList.vue'
import { getRebornThreadList, getThreadDetail } from 'src/utils/api'

const tab = ref('reborn')
const refreshing = ref(false)
const threadListRef = ref(null)

console.log('66666',isAndroid15Plus)

// 处理发帖操作（占位功能）
const handlePost = () => {
    // TODO: 实现发帖功能
    console.log('发帖功能待实现')
}

// 处理刷新操作
const handleRefresh = async () => {
    if (refreshing.value) return
    
    refreshing.value = true
    
    try {
        // 滚动到顶部
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        })
        
        // 等待滚动完成后再刷新数据
        await nextTick()
        setTimeout(() => {
            // 调用子组件的刷新方法
            if (threadListRef.value && threadListRef.value.refresh) {
                threadListRef.value.refresh()
            }
            refreshing.value = false
        }, 300) // 给滚动动画一些时间
        
    } catch (error) {
        console.error('刷新失败:', error)
        refreshing.value = false
    }
}
</script>

<style scoped>
.refresh-btn{
    background-color: white;
}

.fab-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fab-btn {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.fab-btn:hover {
    transform: scale(1.05);
}

.fab-btn:active {
    transform: scale(0.95);
}

.post-btn {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.8;
    }
}

/* 暗色主题适配 */
.body--dark .fab-btn {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.body--dark .refresh-btn{
    background-color: black;
}
</style>